package cn.mujiankeji.mbrowser.界面.标签页.快照

import androidx.compose.animation.core.FastOutSlowInEasing
import androidx.compose.animation.core.RepeatMode
import androidx.compose.animation.core.animateFloat
import androidx.compose.animation.core.infiniteRepeatable
import androidx.compose.animation.core.rememberInfiniteTransition
import androidx.compose.animation.core.tween
import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.statusBars
import androidx.compose.foundation.layout.windowInsetsTopHeight
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.DisposableEffect
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.foundation.shape.RoundedCornerShape
import cn.mujiankeji.mbrowser.app.应用路由
import cn.mujiankeji.mbrowser.数据.枚举类.页面状态枚举
import cn.mujiankeji.mbrowser.界面.图标.MyIconPack
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.错误
import cn.mujiankeji.mbrowser.界面.标签页.统一标签页布局
import kotlinx.coroutines.cancel
import kotlinx.coroutines.launch
import kotlinx.serialization.Serializable

@Serializable
abstract class 轻页面组件 {
    abstract val 组件 : String // 组件名称
}

@Composable
fun 快照页面布局(state : 快照状态,
                 showTitle : Boolean,
                 content : @Composable () -> Unit){
    state.coroutine = rememberCoroutineScope()
    DisposableEffect(Unit) {
        onDispose {
            state.coroutine?.cancel()
            state.coroutine = null
        }
    }

    LaunchedEffect(Unit) {
        if (state.状态.value == 页面状态枚举.初始化){
            state.加载()
        }
    }

    快照页面布局(state.状态.collectAsState().value,state.加载出错信息,
        onReload = {state.coroutine?.launch {
            state.重载()
        }})
    {
        if (!showTitle)(content())
        else {
            统一标签页布局(title = {state.标题.collectAsState().value?:""},
                action = {
                    Box(Modifier
                        .padding(end = 10.dp)
                        .clip(MaterialTheme.shapes.extraSmall)
                        .background(MaterialTheme.colorScheme.surfaceVariant)
                        .clickable {
                            应用路由.加载网页(state.来源().地址)
                        }
                        .padding(horizontal = 12.dp)
                        .height(26.dp),
                        contentAlignment = Alignment.Center,

                        )
                    {
                        Text("完整访问", style = MaterialTheme.typography.labelMedium,
                            color = MaterialTheme.colorScheme.onSurfaceVariant)
                    }
                })
            {
                content()
            }
        }
    }


}

/**
 * @param pageState 页面状态
 * @param onReload 重新加载
 * @param content 内容
 */
@Composable
private fun 快照页面布局(pageState : 页面状态枚举,
                 错误信息 :String?,
                 onReload : () -> Unit,
                 content : @Composable () -> Unit)
{

    when(pageState) {
        页面状态枚举.初始化,页面状态枚举.加载中 -> {
            加载中视图()
        }

        页面状态枚举.失败 -> {
            失败视图(错误信息,onReload)
        }

        页面状态枚举.完成 ->{
            content()
        }
    }

}



@Composable
private fun 加载中视图(){
    Box(Modifier.fillMaxSize()) {
        // 骨架屏效果实现
        SkeletonLoadingEffect()
    }
}

@Composable
private fun SkeletonLoadingEffect() {
    val shimmerColors = listOf(
        Color.LightGray.copy(alpha = 0.6f),
        Color.LightGray.copy(alpha = 0.2f),
        Color.LightGray.copy(alpha = 0.6f)
    )
    
    val transition = rememberInfiniteTransition()
    val translateAnimation = transition.animateFloat(
        initialValue = 0f,
        targetValue = 1000f,
        animationSpec = infiniteRepeatable(
            animation = tween(
                durationMillis = 1000,
                easing = FastOutSlowInEasing
            ),
            repeatMode = RepeatMode.Restart
        )
    )
    
    // 创建渐变刷子
    val brush = androidx.compose.ui.graphics.Brush.linearGradient(
        colors = shimmerColors,
        start = androidx.compose.ui.geometry.Offset(10f, 10f),
        end = androidx.compose.ui.geometry.Offset(
            translateAnimation.value,
            translateAnimation.value
        )
    )
    
    // 骨架屏布局
    Column(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Spacer(Modifier.windowInsetsTopHeight(WindowInsets.statusBars))
        // 标题区域
        Spacer(
            modifier = Modifier
                .height(30.dp)
                .fillMaxWidth(0.7f)
                .padding(bottom = 8.dp)
                .background(brush, RoundedCornerShape(4.dp))
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        // 内容区域 - 多行文本效果
        repeat(6) { // 6行文本
            Spacer(
                modifier = Modifier
                    .height(15.dp)
                    .fillMaxWidth()
                    .padding(bottom = 8.dp)
                    .background(brush, RoundedCornerShape(4.dp))
            )
            Spacer(modifier = Modifier.height(8.dp))
        }
        
        Spacer(modifier = Modifier.height(16.dp))
        
        // 图片区域
        Spacer(
            modifier = Modifier
                .height(200.dp)
                .fillMaxWidth()
                .background(brush, RoundedCornerShape(4.dp))
        )
        
        Spacer(modifier = Modifier.height(16.dp))
        
        // 更多文本
        repeat(4) {
            Spacer(
                modifier = Modifier
                    .height(15.dp)
                    .fillMaxWidth()
                    .padding(bottom = 8.dp)
                    .background(brush, RoundedCornerShape(4.dp))
            )
            Spacer(modifier = Modifier.height(8.dp))
        }
    }
}

@Composable
private fun 失败视图(错误信息 : String ?= null,
                 onReload: () -> Unit){
    val coroutine = rememberCoroutineScope()
    Box(Modifier.fillMaxSize()){
        androidx.compose.material3.Card(
            modifier = Modifier
                .align(androidx.compose.ui.Alignment.Center)
                .padding(16.dp)
        ) {
            androidx.compose.foundation.layout.Column(
                modifier = Modifier.padding(16.dp),
                horizontalAlignment = androidx.compose.ui.Alignment.CenterHorizontally
            ) {
                Icon(
                    imageVector = MyIconPack.错误,
                    contentDescription = "错误",
                    modifier = Modifier.padding(bottom = 8.dp),
                    tint = androidx.compose.material3.MaterialTheme.colorScheme.error
                )
                Text(
                    text = 错误信息 ?: "加载失败",
                    style = androidx.compose.material3.MaterialTheme.typography.bodyMedium,
                    textAlign = androidx.compose.ui.text.style.TextAlign.Center
                )
                androidx.compose.material3.Button(
                    onClick = { coroutine.launch {
                        onReload()
                    } },
                    modifier = Modifier.padding(top = 16.dp)
                ) {
                    Text("重试")
                }
            }
        }
    }
}